<template>
  <el-input
    v-model="searchValue"
    placeholder="搜索"
    clearable
    @clear="handleQuery"
    @keyup.enter="handleQuery"
    v-bind="attrs">
    <template #append v-if="showButton">
      <el-button :icon="Search" @click="handleQuery" />
    </template>
  </el-input>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'

const props = defineProps({ modelValue: String, showButton: { type: Boolean, default: true } })

const emit = defineEmits(['handleQuery'])

const attrs = useAttrs()

const searchValue = ref('')

watch(
  () => props.modelValue,
  (newVal) => {
    searchValue.value = newVal
  },
  { immediate: true }
)

function handleQuery() {
  emit('handleQuery')
}
</script>

<style lang="scss" scoped></style>
